<template>
  <div class="container coupon">
    <!-- <van-nav-bar
      title="关注的店铺"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="coupon-list-row">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多数据了"
        >
        <div v-for="(item,index) in shopList" :key="index" @click="go(item.Id)">
            <div class="flex coupon-list" >
            <div class="shop-pic">
                <!-- <img class="img" :src="item.HeadUrl" οnerrοr="defaultImg"> -->
                <van-image
                  width="2.133333rem"
                  height="2.133333rem"
                  fit="cover"
                  :src="item.HeadUrl"
                  error="@/assets/logo.jpg"
                />
            </div>
            <div class="flex-1">
              <div class="coupon-name">{{item.UserName}}</div>
              <!-- <div class="shop-info">
                <span>服装</span>
                <span>尚生活1号楼/1F  L107-2</span>
              </div> -->
              <div class="text-right">
                <span @click.stop="cancelFoucs(item.Id,index)">
                 <van-icon class="main-color" name="like"  />
                </span>
              </div>
            </div>
          </div>
        </div>
          
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
//import { msToDate } from '@/until/until';
export default {
  name: 'coupon',
  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      shopList:[],
      pageIndex:0,
      pageSize:10,
      userId:''
    };
  },
  mounted() {
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.userId = userInfo.Id;
    this.getMyCoupon();
  },
  methods: {
     onClickLeft() {
      this.$router.go(-1);
    },
    go(id){
      this.$router.push({
          path: '/shopDetail',
          query:{shopId:id}
      })
    },
    onRefresh() {
      setTimeout(() => {
        this.pageIndex = 0;
        this.getMyCoupon();
        this.$toast('刷新成功');
        this.isLoading = false;
        this.finished = false;
      }, 500);
    },
    getMyCoupon(){
      this.$api.mine.getUserAttentionShops({ 
          PageIndex:++this.pageIndex,
          PageSize:this.pageSize   
      }).then(res=> {
        this.loading = false;
        let data = res.Data;
        for(let i=0;i<data.Data.length;i++){
          if(!data.Data[i].HeadUrl){
            data.Data[i].HeadUrl = './assets/logo.jpg'
          }
        }
        if(data.PageIndex==1){
          this.shopList = data.Data;
        }else{
          this.shopList = this.shopList.concat(data.Data);
        }
        if (this.shopList.length >= data.TotalNum) {
          this.finished = true;
        }
      })    
    },
    cancelFoucs(id,index){
      this.$api.mine.cancelAttentionShop(id).then(res=> {
        if(res.IsSuccess){
          this.$toast('取消关注');
          this.shopList.splice(index,1);
        }
      })    
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.coupon {
  height: auto;
  .coupon-list-row {
    padding: .533333rem .266667rem;
    .coupon-list {
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #fff;
      padding: .266667rem;
      margin-bottom: .266667rem;
      .shop-pic {
        width:2.133333rem;
        height: 2.133333rem;
        border:1px solid #ddd;
        margin-right: .266667rem;
        .img {
          width:2.133333rem;
          height: 2.133333rem;
        }
      }
      .shop-info {
        margin-top: .266667rem;
        font-size: .32rem;
        color: #999;
      }
      .coupon-name {
        font-size: .426667rem;
        margin-top: .133333rem;
        color: #333;
      }
      .text {
        font-size: .32rem;
        color: #999;
      }
    }
  }
}
</style>